<template>
	<view class="page pt-2">
			<view class="content-list px-3">
				<view class="item-content mb-3" v-for="(item,index) in news" :key="index" @click="readDetail(item.id)">
					<image :src="item.image"></image>
					<view class="text-ellipsis">{{item.name}}</view>
				</view>
			</view>
	</view>
</template>

<script>
	import { postHome } from '../../api/home.js'
	export default {
		data() {
			return {
				news: [], // 新闻资讯
			}
		},
		onLoad() {
			this.init();
			
		},
		methods: {
			async init() {
				var res = await postHome()
				if(res.data.code == 1) {
					this.news  = res.data.data.news;
				}
			},
			// 文章详情
			readDetail(id) {
				if(!uni.getStorageSync('userInfo')) {
					uni.navigateTo({
						url: "/pages/user/login",
						success() {
							uni.showToast({
								title: "请登录",
								icon: "none"
							})
						}
					})
					return
				} else {
					uni.navigateTo({
						url: "/pages/home/newDetail?id="+id
					})
				}
				
			} 
		}
	}
</script>

<style>
	page {
		background: rgb(245, 245, 245) !important;
	}

	.top-head-bg {
		width: 100%;
		height: 200rpx;
		position: relative;
		margin-bottom: 200rpx;
	}

	.top-head-bg image {
		width: 100%;
		height: 100%;
	}

	.swiper-box {
		width: 670rpx;
		height: 260rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 57rpx;
	}

	.swiper-item,
	.swiper-item image {
		width: 100%;
		height: 100%;
	}
	.nav-list {
		background-color: white;
		padding: 20rpx 40rpx;
		border-radius: 10rpx;
		font-size: 26rpx;
		color: #333;
	}
	.item-nav image{
		width: 80rpx;
		height: 80rpx;
		}
		
		.rmzx {
			width: 100%;
			padding: 15rpx 32rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
		}
		.rmzx-img {
			width: 105rpx;
			height: 45rpx;
		}
		.item-content {
			width: 100%;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
		}
		.item-content image {
			width: 100%;
			height: 295rpx;
			margin-bottom: 25rpx;
			border-radius: 10rpx;
		}
</style>
